body{
	font-family: georgia,serif;
	background:#ddd;
	font-weight: 400;
	font-size: 15px;
	color:#333;
	overflow:hidden;
	-webkit-font-smoothing:antialiased;  /*抗锯齿css3新增*/
}
a{
	text-decoration: none;
	color:#555;
}
.clr{
	width: 0;
	height:0;
	overflow:hidden;
    clear:both;
    padding:0;
    margin:0;
}
.st-container{
	width: 100%;
	height: 100%;
	position: absolute;
	left:0;
	top:0;
	font-family: "Josefin Slab";
}
.st-container>input,
.st-container>a{
	width: 20%;
	height:2.4rem;
	line-height:2.4rem;
	position: fixed;
	bottom:0;
}
.st-container>input{
	opacity: 0;
	z-index:2;
	cursor: pointer;
}
.st-container>a{
	z-index: 1;
	font-size: 700;
	font-size: 16px;
	background-color:#e23a6e;
	text-align: center;
	color:#fff;
	text-shadow:1px 1px 1px rgba(151,24,64,.2);
}
#st-control-1,#st-control-1+a{
	left:0%;
}
#st-control-2,#st-control-2+a{
	left:20%;
}
#st-control-3,#st-control-3+a{
	left:40%;
}
#st-control-4,#st-control-4+a{
	left:60%;
}
#st-control-5,#st-control-5+a{
	left:80%;
}
.st-container input:checked+a,
.st-container input:checked:hover+a{
  background-color:#821134;
}
.st-container input:checked+a:after{
	content: "";
	width: 0;
	height:0;
	overflow: hidden;
	border:.5rem solid transparent;
	border-bottom-color:#821134;
	position:absolute;
	bottom:100%;
	left:50%;
	margin-left:-.5rem; 
}
.st-container input:hover + a{
   background-color:#AD244F;
}

/*内容区*/
.st-scroll, .st-panel{
	width: 100%;
	height:100%;
	position: relative;
}
.st-scroll{
	left:0;
	top:0;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-backface-visibility:hidden;   /*隐藏被旋转的 div 元素的背面*/
	backface-visibility:hidden;
	-webkit-transition:all .6s ease-in-out;
	transition:all .6s ease-in-out;
}
.st-panel{
	background: #fff;
	overflow: hidden;
}
#st-control-1:checked ~ .st-scroll{
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
#st-control-2:checked ~ .st-scroll{
	-webkit-transform:translateY(-100%);
	transform:translateY(-100%);
}
#st-control-3:checked ~ .st-scroll{
	-webkit-transform:translateY(-200%);
	transform:translateY(-200%);
}
#st-control-4:checked ~ .st-scroll{
	-webkit-transform:translateY(-300%);
	transform:translateY(-300%);
}
#st-control-5:checked ~ .st-scroll{
	-webkit-transform:translateY(-400%);
	transform:translateY(-400%);
}

#st-panel-1{
	background-color: orange;
}
#st-panel-2{
	background-color: yellow;
}
#st-panel-3{
	background-color:#690;
}
#st-panel-4{
	background-color: pink;
}
#st-panel-5{
	background-color: green;
}



.st-panel h2{
	font-size:2rem;
	line-height:2;
	text-align:center;
	color:#fff;
	text-shadow:1px 1px 4px rgba(0,0,0,.5);
	-webkit-backface-visibility:hidden;   /*隐藏被旋转的 div 元素的背面*/
	backface-visibility:hidden;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2
{
	-webkit-animation:moveD .6s ease-in-out .2s backwards;
	animation:moveD .6s ease-in-out .2s backwards;
}
@-webkit-keyframes moveD{
   0%{
   	  -webkit-transform:translateY(-3rem);
   	  opacity: 0;
   }
   100%{
   	  -webkit-transform:translateY(0);
   	  opacity: 1;
   }
}
@keyframes moveD{
  0%{
   	  transform:translateY(-3rem);
   	  opacity: 0;
   }
   100%{
   	  transform:translateY(0);
   	  opacity: 1;
   }
}


.st-panel p{
	font-size:.75rem;
	line-height:1.5;
	width:90%;
	color:#333;
	margin:0 auto;
	-webkit-backface-visibility:hidden;   /*隐藏被旋转的 div 元素的背面*/
	backface-visibility:hidden;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p
{
	-webkit-animation:moveP .6s ease-in-out .2s backwards;
	animation:moveP .6s ease-in-out .2s backwards;
}
@-webkit-keyframes moveP{
   0%{
   	  -webkit-transform:translateY(3rem);
   	  opacity: 0;
   }
   100%{
   	  -webkit-transform:translateY(0);
   	  opacity: 1;
   }
}
@keyframes moveP{
  0%{
   	  transform:translateY(3rem);
   	  opacity: 0;
   }
   100%{
   	  transform:translateY(0);
   	  opacity: 1;
   }
}


.st-scroll .st-panel .st-desc{
	width:5rem;
	height:5rem;
	background-color:yellow;
	transform:translateY(-50%) rotate(45deg);
	-ms-transform:translateY(-50%) rotate(45deg); 
	-webkit-transform:translateY(-50%) rotate(45deg); 
	margin:0 auto;
	overflow:hidden;
}
#st-panel-1 .st-desc{
	background-color: #fff;
}
#st-panel-2 .st-desc{
	background-color: orange;
}
#st-panel-3 .st-desc{
	background-color:yellow;
}
#st-panel-4 .st-desc{
	background-color: #690;
}
#st-panel-5 .st-desc{
	background-color: pink;
}

